<template>
  <main>
    <c-header :menus="[]" :btns="btns" />

    <am-container style="min-height:700px;">
      <am-row>
        <!-- 个人资料 -->
        <div :class="['am-u-sm-12', amReactive ? 'am-u-md-3' : 'am-u-md-5']"
          @mouseenter="amReactive = false"
          @mouseleave="amReactive = true"
          style="transition: width .45s ease-out;">
          <field-data />
        </div>

        <!-- 我的作品、我的获奖、新增\编辑作品 -->
        <div :class="['am-u-sm-12', amReactive ? 'am-u-md-9' : 'am-u-md-7']"
          style="transition: width .45s ease-out;">
          <router-view :tabs="tabs" />
        </div>
      </am-row>
    </am-container>

  <!-- 底部 -->
       <dg-footer />
  </main>
  
</template>

<script>
import Header from '@/dg_components/DgHeader'
import FieldData from '@/views2/personal/Data'
import DgFooter from '@/views2/Footer'// 底部

export default {
  name: 'personal',
  data() {
    return {
      amReactive: true,
      tabs: [{// 选项卡
        name: '我的作品',
        tab: 'table'
      }, {
        name: '我的获奖',
        tab: 'prize'
      }, {
        name: '作品新增',
        tab: 'create/c'
      }],
      btns: [{
        name: '返回上一级',
        href: "/"
      }]
    }
  },
  components: {
    FieldData,
    CHeader: Header,
    DgFooter
  },
  methods: {
    ready() {
      this.$router.push('/personal/panel/table');// 加载panel
    }
  },
  mounted() {
    this.ready();
  }
}
</script>

